The SHELL Command
In this article, I'll show you how to use the SHELL API from within HTML to perform several common functions. If you want to learn more about the syntax of the SHELL command, take a look at the Microsoft's Web site. Just search on SHELLEXECUTE, and you'll find pages and pages about the SHELL API, its syntax, and how to use it.
SHELL is an ActiveX API. That is, SHELL has certain properties and methods that are exposed, or are public, which you can access from your own applications. SHELL also follows the Component Object Model, or COM, method of access, which means, among other things, that it has certain standard behaviors. You can take advantage of these standard behaviors in your own HTML applications. To do so, you'll need to write a little bit of JavaScript.
JavaScript and SHELL
If you've read some of the other JavaScript articles in Midrange Programmer, you're probably pretty proficient at using JavaScript by now. If you're not, you may want to go back and read those articles again, just to get familiar with it. For this article, we're going to write some JavaScript in order to demonstrate how to use the SHELL ActiveX object to execute commands on your PC.
To start, open up Microsoft Notepad.exe and create a new HTML document.
<HTML> <HEAD> </HEAD> <BODY> <FORM name="Form1"> <CENTER> <BR><BR> <H1>Execute PC Commands From HTML </H1> <BR><BR> <File Name to Open:> <Input type="text" name="filename"/> <BR><BR> <Input type="Button" name="Button1" value="Run Notepad.exe" /> <BR><BR> <Input type="Button" name="Button2" value="Run Notepad.exe with Parameters" /> </CENTER> </BODY> </FORM> </HTML>
Save this document with a name like DemoSHELLAPI.htm and then open it in a browser. It should look something like the one shown here:
At this point, your HTML code doesn't do anything, because you haven't added any code behind it. Let's do that now.
Adding the Power
To use the SHELL API, you'll need to write a JavaScript function and define the SHELL API parameters within it. And you'll need to execute the function for when the user clicks a button.
Modify the DemoSHELLAPI.htm file to add the following code between the opening and closing HEAD tags:
<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
function executeCommands(inputparms)
{
// Instantiate the Shell object and invoke
its execute method.
var oShell = new ActiveXObject("Shell.Application");
var commandtoRun = "C:\\Winnt\\Notepad.exe";
if (inputparms != "")
{
var commandParms = document.Form1.filename.value;
}
// Invoke the execute method.
oShell.ShellExecute(commandtoRun, commandParms,
"", "open", "1");
}
</SCRIPT>
Modify your buttons, in the BODY of the text to add the
"onClick" event to each.
<input type="Button" name="Button1"
value="Run Notepad.exe" onClick="executeCommands()" />
<input type="Button" name="Button2"
value="Run Notepad.exe with Parameters"
onClick="executeCommands(' + hasPARMS + ')" />
What That Does
Here's what this JavaScript does.
First, it accepts a parameter from whatever HTML element calls it. In this case, the JavaScript is executed when the user clicks one of the buttons on the HTML form.
Next, the JavaScript will instantiate the ActiveX object Shell.application. This is the SHELL API. The instantiated object is then assigned to the variable named oShell. Incidentally, you can instantiate most ActiveX objects from within HTML in this manner.
Next, we'll set the value commandtoRun to the value of the command we want to execute, in this case Notepad.exe. Notice that there are two backslashes (\\) between each path parameter. This is required because, if you only used a single backslash in the path, JavaScript would interpret that single script as an operator. By making the command you wish to execute a variable, you can easily modify your HTML code so that you execute whatever command the user chooses from your HTML form. This will give you a lot of flexibility in your applications.
Next, if the user clicked the button to run NotePad.exe and to pass it a parameter of the name of a file to open, then the variable inputparms will contain the value hasParms, which is defined in the "onClick" event of the second button on this Form. If inputparms is not blank, the script will retrieve the value the user entered in the input field on the form and set the variable commandParms equal to that value.
Finally, we'll execute the command to run, Notepad.exe, by calling the ShellExecute method of the SHELL API. We'll pass the ShellExecute method several parameters, each individually enclosed within double quotation marks ("). The first parameter is the command to be executed, in this case Notepad.exe. The second parameters are the input parameters, if any, to the command. The other parameters are not important to this discussion, but if you're interested in using them, be sure to check out the SHELL documentation on Microsoft's Web site.
Save this file and reopen it in your browser and try it out.
Powerful Functions
Using ActiveX objects from within HTML gives you the power and flexibility you need to code professional and useful applications. Explore the SHELL API and some of the other Win32 APIs and see how you can expand on them to add even more power to your applications.